<template>
  <div>
    <div>
      <el-button type="primary" @click="openDialog">添加模板</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="模版id" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分类模板名称" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="关联品牌" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.brandIds | filterStr
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="关联规格" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.specIds | filterStr
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="扩展属性" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.customAttributeItems | filterStr
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="3"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="templateData">
          <el-form-item label="商品类型" :label-width="formLabelWidth">
            <el-input v-model="templateData.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="关联品牌" :label-width="formLabelWidth">
            <el-select v-model="brandListValue" multiple placeholder="请选择">
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="JSON.stringify({ id: item.id, text: item.name })"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联规格" :label-width="formLabelWidth">
            <el-select v-model="specIdsListValue" multiple placeholder="请选择">
              <el-option
                v-for="item in specIdsList"
                :key="item.id"
                :label="item.specName"
                :value="JSON.stringify({ id: item.id, text: item.specName })"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="扩展属性" :label-width="formLabelWidth">
            <el-button @click="appendAttr" type="success"
              >新增扩展属性</el-button
            >
            <el-table :data="customAttributeItemsList" style="width: 60%">
              <el-table-column label="属性名称" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.text"
                    placeholder="请输入内容"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeletes(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  typeTemplateListApi,
  brandListApi,
  specIdsListApi,
  saveApi,
  delByIdApi,
  updateApi,
} from "@/api/typeTemplate";
export default {
  data() {
    return {
      templateData: {
        id: "",
        name: "",
        specIds: "",
        brandIds: "",
        customAttributeItems: "",
      },
      brandListValue: [],
      brandList: [],
      specIdsListValue: [],
      specIdsList: [],
      customAttributeItemsList: [],
      // ————————————————————————————————————————————————————————
      formLabelWidth: "120px",
      dialogFormVisible: false,
      tableData: [],
      total: "",
      searchEntity: {
        name: "",
        startPage: 1,
        endPage: 3,
      },
    };
  },
  created() {
    this.list();
  },

  filters: {
    filterStr(strList) {
      if (strList == null || strList == "") {
        return;
      } else {
        var newList = "";
        var list = JSON.parse(strList);
        for (let i = 0; i < list.length; i++) {
          newList += list[i].text + ",";
        }
        return newList.substring(0, newList.length - 1);
      }
    },
  },

  methods: {
    // 修改方法
    handleEdit(index, row) {
      this.templateData = row;
      this.customAttributeItemsList = JSON.parse(
        this.templateData.customAttributeItems
      );
      brandListApi().then((result) => {
        this.brandList = result.data.data;
        this.brandListValue = this.strToList(this.templateData.brandIds);
      });
      specIdsListApi().then((result) => {
        this.specIdsList = result.data.data;
        this.specIdsListValue = this.strToList(this.templateData.specIds);
      });
      console.log(row);
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      delByIdApi(row.id);
      this.list();
    },
    saveOrUpdate() {
      this.templateData.customAttributeItems = JSON.stringify(
        this.customAttributeItemsList
      );
      this.templateData.specIds = this.listToStr(this.specIdsListValue);
      this.templateData.brandIds = this.listToStr(this.brandListValue);
      if (this.templateData.id == null || this.templateData.id == "") {
        saveApi(this.templateData).then((result) => {
          this.dialogFormVisible = false;
          this.list();
        });
      } else {
        updateApi(this.templateData).then((result) => {
          this.dialogFormVisible = false;
          this.list();
        });
      }
    },
    strToList(strList) {
      var newList = [];
      var list = JSON.parse(strList);
      for (let i = 0; i < list.length; i++) {
        newList.push(JSON.stringify(list[i]));
      }
      return newList;
    },
    listToStr(list) {
      var newList = [];
      for (let i = 0; i < list.length; i++) {
        newList.push(JSON.parse(list[i]));
      }
      return JSON.stringify(newList);
    },
    handleDeletes(index) {
      this.customAttributeItemsList.splice(index, 1);
    },
    appendAttr() {
      this.customAttributeItemsList.push({});
    },
    openDialog() {
      (this.brandListValue = []),
        (this.specIdsListValue = []),
        (this.templateData.name = []);
      this.customAttributeItemsList = [];
      brandListApi().then((result) => {
        this.brandList = result.data.data;
      });
      specIdsListApi().then((result) => {
        this.specIdsList = result.data.data;
      });
      this.dialogFormVisible = true;
    },
    handleCurrentChange(val) {
      this.searchEntity.startPage = val;
      this.list();
    },
    list() {
      typeTemplateListApi(this.searchEntity).then((result) => {
        this.tableData = result.data.data.list;
        this.total = result.data.data.total;
      });
    },
  },
};
</script>
